<template>
    <div class = 'mine'>
        <div class = 'loginBox'>
            <div class = 'login'>
                <div class = 'user'>
                    <i class = 'iconfont icon-my'></i>
                </div>
                 <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if = 'username == "" || username == null'>
                    <div class = 'loginButton'>
                       立即登录
                    </div>
                </router-link>
                <div class = 'username' v-if = 'username != "" && username != null'>
                    你好 , {{username}} 
                </div>
                <div class = 'message'>
                    <router-link :to = '{path:"/message",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div class = 'loginButton'>
                            <i class = 'iconfont icon-tixing'></i>
                        </div>
                    </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if = 'username == "" || username == null'>
                        <div class = 'loginButton'>
                            <i class = 'iconfont icon-tixing'></i>
                        </div>
                    </router-link>
                </div>
                <!-- <div class = 'exit' v-if = 'username != "" && username != null' @click = 'exit'>
                    注销
                </div> -->
            </div>
        </div>
        <div class = 'order'>
            <div class = "left">
                <div>
                    <router-link :to = '{path:"/movieOrder",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <i class = 'iconfont icon-dingdan'></i>
                    </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <i class = 'iconfont icon-dingdan'></i>
                    </router-link>
                </div>
                <div>
                    <router-link :to = '{path:"/movieOrder",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div class = 'm-order'>
                            电影订单
                        </div>
                    </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <div class = 'm-order'>
                            电影订单
                        </div>
                    </router-link>
                </div>
            </div>
            <div class = 'right'>
                <div>
                    <router-link :to = '{path:"/shopOrder",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <i class = 'iconfont icon-dingdan1'></i>
                    </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <i class = 'iconfont icon-dingdan1'></i>
                    </router-link>
                </div>
                <div>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <div class = 'm-order'>
                            商品订单
                        </div>
                    </router-link>
                    <router-link :to = '{path:"/shopOrder",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div class = 'm-order'>
                            商品订单
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <div class = 'myBody'>
            <ul>
                <li>
                    <router-link :to = '{path:"/ticket",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div>
                            <i class = 'iconfont icon-youhuiquan'></i>
                        </div>
                        <div>卖座券</div>
                        <div class = 'arrowR'>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <div>
                            <i class = 'iconfont icon-youhuiquan'></i>
                        </div>
                        <div>卖座券</div>
                        <div class = 'arrowR'>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link :to = '{path:"/money",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div>
                            <i class = 'iconfont icon-hongbao'></i>
                        </div>
                        <div>组合红包</div>
                        <div class = 'arrowR'>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <div>
                            <i class = 'iconfont icon-hongbao'></i>
                        </div>
                        <div>组合红包</div>
                        <div class = 'arrowR'>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link :to = '{path:"/rest",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div>
                            <i class = 'iconfont icon-yue'></i>
                        </div>
                        <div>余额</div>
                        <div class = 'arrowR'>
                            <div>¥0.00</div>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                    <router-link :to = '{path:"/rest",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <div>
                            <i class = 'iconfont icon-yue'></i>
                        </div>
                        <div>余额</div>
                        <div class = 'arrowR'>
                            <div>¥0.00</div>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link :to = '{path:"/setting",query:{name:name,id:id}}' v-if='username != "" && username != null'>
                        <div>
                            <i class = 'iconfont icon-shezhi'></i>
                        </div>
                        <div>设置</div>
                        <div class = 'arrowR'>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                        </router-link>
                    <router-link :to = '{path:"/login",query:{name:name,id:id}}' v-if='username == "" || username == null'>
                        <div>
                            <i class = 'iconfont icon-shezhi'></i>
                        </div>
                        <div>设置</div>
                        <div class = 'arrowR'>
                            <i class = 'iconfont icon-youjiantou'></i>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <my-bottom v-bind:flag = 2 v-bind:mineCity = 'name' v-bind:mineId = 'id'></my-bottom>
    </div>    
</template>
<script>
import myBottom from '@/components/myBottom.vue';
export default {
    data(){
        return {
            name : '',
            id : 0,
            username : '',
        }
    },
    methods:{
        // exit(){
        //     this.username = '';
        //     // localStorage.setItem('_token_name',null);
        //     localStorage.removeItem('_token_name');
        // }
    },
    components:{
        myBottom,
    },
    created(){
        this.name = this.$route.query.name;
        this.id = this.$route.query.id;
        this.username = localStorage.getItem('_token_name');
        // console.log(this.username);
    }
}
</script>
<style lang = 'scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
    .loginBox{
        background-image: linear-gradient(#ff9900,#ff990044);
        padding : 20px 20px;
        box-sizing : border-box;
        .login{
            padding : 20px 0;
            &::after{
                content:'';
                display:block;
                clear:both;
            }
            .user{
                float:left;
                background-color : #e5e6e7;
                border-radius : 50%;
                width : 60px;
                height : 60px;
                text-align : center ;
                line-height : 60px;
                i{
                    font-size : 40px;
                    color : white;
                }
            }
            .username{
                float : left;
                font-size : 20px;
                color : #3e606f;
                margin : 15px 10px;
                height : 30px;
                line-height : 30px;
            }
            .exit{
                float : right;
                font-size : 16px;
                color : #3e606f;
                margin : 15px 10px;
                height : 30px;
                line-height : 30px;
            }
            .loginButton{
                float: left;
                font-size : 16px;
                color : white;
                height : 60px;
                line-height : 60px;
                margin-left : 20px
            }
            .message{
                float : right;
                font-size : 16px;
                color : white;
                height : 60px;
                line-height : 60px;
                i{
                    font-size : 40px;
                }
            }
        }
    }
    .order{
        background-color : white;
        display : flex;
        justify-content : space-around;
        >div{
            box-sizing : border-box;
            >div,.m-order{
                text-align : center;
                font-size : 16px;
                margin : 10px 0;
                color :  grey;
                i{
                    font-size :  30px;
                }
                .icon-dingdan{
                    color : #f6d04b;
                }
                .icon-dingdan1{
                    color : #c2d562;
                }
            }
        }
    }
    .myBody{
        margin-top : 10px;
        >ul{
            >li{
                height : 40px;
                line-height : 40px;
                padding : 0 10px;
                box-sizing : border-box;
                background-color : white;
                margin : 3px 0 ;
                div{
                    float : left;
                    i{
                        display : inline-block;
                        margin-right : 10px;
                        font-size : 22px;
                    }
                    .icon-youhuiquan,.icon-yue{
                        color : #ff9900;
                    }
                    .icon-hongbao,.icon-shezhi{
                        color : #c2d562;
                    }
                }
                .arrowR{
                    float : right;
                    i{
                        color : grey;
                    }
                    div{
                        position : absolute;
                        font-size : 16px;
                        right : 50px;
                    }
                }
            }
        }
    }
</style>